Jordi Jordi - 5 months ago 13
CSS Question

Bootstrap push, pull not aligning

I'm trying to achieve a somewhat special design with three blocks. As recomended I started mobile first :

-------------------
| Title |
-------------------
| Image |
| |
-------------------
| Text |
| ... |
-------------------


But starting on tablets I want the following to happen:

|-------------------------|
| | Title |
| Image |-----------|
| | |
| | Text |
|-------------------------|


But instead the following shows:

|-------------------------|
| | Title |
| Image |-----------|
| |
| |
|-------------------------|
| |
| Text |
|-----------|


My code:

<div class="row">
<div class="text-center col-sm-12 col-md-6 col-md-push-6">
<h2>Title</h2>
</div>
<div class="col-md-6 col-sm-12 col-md-pull-6">
<img class="img-responsive" src="url" />
</div>
<div class="col-md-6 col-sm-12 col-md-push-6">
<h4>Title of text</h4>
<p>Wall of text</p>
</div>
</div>


Thank you!

Answer

Try this :

<div class="row">
<div class="col-xs-12 hidden-lg hidden-sm hidden-md text-center">
    <h2>Title</h2>
</div>
<div class="col-xs-12 col-sm-6">
    Image
</div>
<div class="col-sm-6 col-xs-12">
    <div class="text-center hidden-xs">
        <h2>Title</h2>
    </div>
    <div>
        <h4>Title of text</h4>
        <p>Wall of text</p>
    </div>
</div>