I have a site I am doing 2 separate grid rows to get the style look we want. Is it possible to have those 2 go on mobile so the first column on both of them show up first on mobile?
Hey SandraSquires,
If I understand correctly, you would like the white grid rows to show after the blue rows, in order for each column.
Try adding this code to the end of your functions.php file in Appearance > Editor:
function custom_order_script(){
?>
<script>
$(window).on('load resize', function() {
if ($(window).width() <= 766) {
$(function() {
$('#top.home .avia-builder-el-11').insertAfter('#top.home .avia-builder-el-2');
$('#top.home .avia-builder-el-16').insertAfter('#top.home .avia-builder-el-4');
$('#top.home .avia-builder-el-21').insertAfter('#top.home .avia-builder-el-6');
});
}
else {
$(function() {
$('#top.home .avia-builder-el-4').insertAfter('#top.home .avia-builder-el-2');
$('#top.home .avia-builder-el-6').insertAfter('#top.home .avia-builder-el-4');
$('#top.home .avia-builder-el-8').insertAfter('#top.home .avia-builder-el-6');
});
};
});
</script>
<?php
}
add_action('wp_footer', 'custom_order_script');
This script works on page load, and while it works now, it would be best to add custom ids or classes to each cell of your grid rows and adjust the script because the classes above will change if you add or remove elements from the page.
Best regards,
Mike