1

I have in 1 row 4 columns. In extra small screen I would like to display it in 2 row. For other sizes can remain 1 row.

This is what I am trying:

<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
        1
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        2
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4">
        3
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        4
    </div>
</div>

I have problem only when there is a long text in cell 1:

I want the result like this:

enter image description here

But when I have a long text I got the following:

enter image description here

And I would like to get the following:

enter image description here

Is it possible without creating two rows? The old layout is for big screen, I have to do this for mobile but without changing the old layout.

dvjanm
  • 2,351
  • 1
  • 28
  • 42

1 Answers1

0

Try to put all 'xs' css in two columns, works for me:

<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        1
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        2
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        3
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
        4
    </div>
</div>
Carmen
  • 181
  • 7