Bootstrap: reorder 3 columns on small screens

Question

I\'m having some problems when trying to reorder columns using bootstrap, HTML and CSS.

Currently, my layout is something like this:

B and C are contain

Answer 1

With bootstrap 4 pull-right doesn't work anymore, and it also isn't compatible with flex.

Solution compatible with flex can be based on:

• display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
• order: -1 for reordering "B" element.

Complete code for pure HTML+CSS solution without any libraries:

* {
  box-sizing: border-box;
}

.main-container {
  display: flex;
}

.item {
  width: 50%;
}

.photo-container {
  background: #AAF;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1rem;
}

.photo {
  background: #55F;
  width: 140px;
  height: 220px;
  border: solid 1px #33F;
}

.product-details h1 {
  background: #FAA;
  margin: 0;
  padding: 1rem;
}

.product-description {
  background: #FFA;
  padding: 1rem;
}

@media (max-width: 600px) {
  .main-container {
    flex-direction: column;
  }

  .item {
    width: 100%;
  }
  
  .product-details {
    display: contents;
  }
  
  .product-details h1 {
    order: -1;
  }
}

<div class="main-container">
  <div class="item photo-container">
    <div class="photo"></div>
  </div>
  <div class="item product-details">
    <h1>Product name</h1>
    <div class="product-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Solution based on bootstrap 4:

* {
  box-sizing: border-box;
}

.photo-container {
  background: #AAF;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.photo {
  background: #55F;
  width: 140px;
  height: 220px;
  border: solid 1px #33F;
}

.product-details h1 {
  background: #FAA;
}

.product-description {
  background: #FFA;
}

@media (max-width: 576px) {
  .product-details {
    display: contents;
  }
  .product-details h1 {
    order: -1;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row flex-column flex-sm-row">
    <div class="col-12 col-sm-6 photo-container">
      <div class="photo"></div>
    </div>
    <div class="col-12 col-sm-6 product-details">
      <h1>Product name</h1>
      <div class="product-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

Answer 2

Assuming "A" is taller as in your picture, just use pull-right on the other columns, and col-xs-12 to ensure full width on mobile...

Demo

<div class="row">
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                B
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div>
                A
            </div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                C
            </div>
        </div>
    </div>

Demo