Bootstrap grid ordering responsive

Question

Hey there I'm stuck and I'm looking for someone who's experienced with bootstrap.

This is my current situation:

And that's the corresponding code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig yellow" />
      <h3 class="yellow">1</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig lightgreen" />
      <h3 class="lightgreen">3</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig blue" />
      <h3 class="blue">5</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig orange" />
      <h3 class="orange">2</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig green" />
      <h3 class="green">4</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig brown" />
      <h3 class="brown">6</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
  </div>
</div>

My problem is that in tablet mode the tabs should be like this:

12
34
56

But right now they are like that:

And on Mobile they should look like this:

1
2
3
4
5
6

How can I achieve this?

Answer 1

You can use like this for Bootstrap 3.3.7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

<div class="col-sm-4 col-xs-12">
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig yellow" />
      <h3 class="yellow">1</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig orange" />
      <h3 class="orange">2</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
</div>


<div class="col-sm-4 col-xs-12">
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig lightgreen" />
      <h3 class="lightgreen">3</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig green" />
      <h3 class="green">4</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
    </div>
</div>


<div class="col-sm-4 col-xs-12">
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig blue" />
      <h3 class="blue">5</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig brown" />
      <h3 class="brown">6</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
    </div>
</div>

</div>

Answer 2

I needed to re-arrange your code a bit and added some wrappers to achieve what you want

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig yellow" />
          <h3 class="yellow">1</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig orange" />
          <h3 class="orange">2</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig yellow" />
          <h3 class="yellow">3</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig orange" />
          <h3 class="orange">4</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig yellow" />
          <h3 class="yellow">5</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig orange" />
          <h3 class="orange">6</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
    </div>
  </div>
</div>