Reply To: Changing the order of rows with flexible content

• superchiffre

• July 27, 2015 at 1:07 am

Hey John thanks for your reply and the inspiration!

In the mean while I found another solution that works:

The maximum number of columns in my side are 3… So I made the code above with three layouts.

And added some if statemens. In them I used the bootstrap hide- classes. They make the content display: none.

The if statements look like this:

` $width = get_sub_field(‘column_width’);
$col_size_left = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;
$col_size_right = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;

if($width == ‘6-6’):
$col_size_left = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;
elseif($width == ‘5-7’):
$col_size_left = ‘col-lg-5 col-md-5 col-sm-5 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-7 col-md-7 col-sm-7 col-xs-12’;
elseif($width == ‘7-5’):
$col_size_left = ‘col-lg-7 col-md-7 col-sm-7 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-5 col-md-5 col-sm-5 col-xs-12’;
elseif($width == ‘4-8’):
$col_size_left = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-8 col-md-8 col-sm-8 col-xs-12’;
elseif($width == ‘8-4’):
$col_size_left = ‘col-lg-8 col-md-8 col-sm-8 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
elseif($width == ‘4-4-4’):
$col_size_left = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
$col_size_middle = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
$col_size_right = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
elseif($width == ‘1’):
$col_size_left = ‘col-lg-12 col-md-12 col-sm-12 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
endif; `