Currently, I am working on developing a responsive layout for both desktop and mobile screens using bootstrap 3. However, I am facing issues with the .col-XX-push-X class as the columns are not adjusting their height accordingly.
I aim to create this:
But unfortunately, I am ending up with this:
Below is the relevant section of my code:
<div class="container-fluid">
<div class="row">
<div id="campaign-description-section"
class="section campaign-description-section col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6">
Campaign Description Section
</div>
<div id="shirt-styles-section"
class="section shirt-styles-section col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6">
Shirt Styles Section
</div>
<div id="color-size-section"
class="section color-size-section col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
Color Size Section
</div>
<div id="price-section"
class="section price-section col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
Price Section
</div>
<div id="attention-banner"
class="section attention-banner col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6">
Attention Banner Section
</div>
</div>
You can view the full code on CodePen