1

I am required to have a fairly different distribution of content for each device.

And happen to have almost the exact same question as this one. But the demo from the selected response does not quite fit the question.

The situation: Here is how I want to see the content for xs devices: enter image description here

And here is how I want to see the the content for sm devices: enter image description here

For md and the rest I need to see

A, B, C in the same row.

The problem I'm having, and which is not solved in demo from the selected response, is shown in this fiddle.

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9 col-sm-push-3 col-md-3 col-md-push-9">
            <div style="color:red">A<br>A<br>A</div>
        </div>
        <div class="col-xs-12 col-sm-3 col-sm-pull-9 col-md-3 col-md-pull-3">
            <div style="color:blue">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br></div>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-offset-3 col-md-6 col-md-offset-0 col-md-pull-3">
            <div style="color:green">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br></div>
        </div>
    </div>
</div>

In sm devices the content from B es very high; so I have a vertical gap between A content and C content.

sm output

I'd like to have A content and C content like in the same column, with no vertical gap.

The distribution for xs and md in the fiddle are correct as per my requirements.

I don't see how I can manage to have the xs (from the fiddle), sm (as axplained) and md (from the fiddle) distributions with bootstrap.

Thanks for any help.

Community
  • 1
  • 1
José Villacreses
  • 177
  • 9

2 Answers2

0

i kind of messed up the paragraphs but this one has less space and works fine even though it might not be the best way but this solves the problem for now: 

<div class="container">
            <div class="row">
                <div class="col-sm-6 col-xs-12 col-md-4">
                    <div style="color:red" class="col-sm-12 col-xs-12 col-md-12">A<br>A<br>A</div>
                </div>
                <div class="col-sm-6 col-xs-12 col-md-8">
                    <div style="color:blue" class="col-sm-12 col-xs-12 col-md-4">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br></div>
                    <div style="color:green" class="col-sm-12 col-xs-12 col-md-4">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br></div>
                </div>
            </div>
</div>
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
0

Create a custom class with float:right triggered only at sm like so:

@media (min-width: 768px) and (max-width: 991px)
{
.col-sm-pull-right{
    float:right;
  }
}

and apply it to the A and C divs.

DEMO: http://www.bootply.com/Oc3cVJN8V3

ps - I am kind of surprised a class like this doesn't exist in Bootstrap, but maybe there is a good reason!

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39