Answered Column stacking order with bootstrap

- ☆ A M B ☆
- 39 Posts
twobears Reply #1, 8 years, 8 months ago
Using EVO 1.0.15 with the EVOSTART responsive template by http://www.tattoocms.it/modx-evolution-templates/start-free-modx-evolution-template.html
I have developed a website using the excellent EVOSTART Bootstrap theme.
There are several pages that have 3 columns, see live example here - https://goo.gl/9rMr74
```
// THREE COLUMN LAYOUT/////////////////////

//Left and Right Sidebar layout
 if ($Layout[$LayoutTv] == LeftRightSidebar) {
//set class placeholders
	 $modx->setPlaceholder('CoClass', "col-sm-12 col-md-6 col-lg-6");
	 $modx->setPlaceholder('CLClass', "col-sm-12 col-md-3 col-lg-3");
	 $modx->setPlaceholder('CRClass', "col-sm-12 col-md-3 col-lg-3");
//set chunk placeholders
$CLChunk = $modx->getChunk(''.$ColumnLChunk.'');
$modx->setPlaceholder('ColumnLContent', "$CLChunk");
$CRChunk = $modx->getChunk(''.$ColumnRChunk.'');
$modx->setPlaceholder('ColumnRContent', "$CRChunk");
 }
```
I am trying to get the columns to stack as per this example on jsfiddle here - http://jsfiddle.net/twobears/f4t1g4va/1/
ie; on large monitors the column order is Left - Main - Right and on small devices the desired column order should be stacked Main - Left - Right.
However, when I apply the fiddle code to the existing template code (see example above) the columns are jumbled together on large monitors and has no effect on small devices.
Any insight to where I am going wrong would be greatly appreciated. Thanks.
This question has been answered by Twobears. See the first response.

discuss.answer

☆ A M B ☆
39 Posts

twobears Reply #2, 8 years, 8 months ago

SOLVED:

Changed the 3 x column page template from:

			 <div class="container no-padding">
      	  [+ColumnLContent+]
		  [+ColumnL2Content+]
        <div class="[+CoClass+]">
			[[if? &is=`[*HideContent*]:is:yes` &then=`` &else=`@TPL:StartHomeContent`]]
		  </div>
		  [+ColumnR2Content+]
		  [+ColumnRContent+]
			 </div>

to this:

			 <div class="container no-padding">
        <div class="[+CoClass+]">
			[[if? &is=`[*HideContent*]:is:yes` &then=`` &else=`@TPL:StartHomeContent`]]
		  </div>
      	  [+ColumnLContent+]
		  [+ColumnL2Content+]
		  [+ColumnR2Content+]
		  [+ColumnRContent+]
			 </div>

and added this to the 3 x column layout class:

	 $modx->setPlaceholder('CRClass', "col-sm-12 col-md-3 col-lg-3");
	 $modx->setPlaceholder('CLClass', "col-sm-12 col-md-3 col-md-pull-6 col-lg-3");
	 $modx->setPlaceholder('CoClass', "col-sm-12 col-md-6 col-md-push-3 col-lg-6");