Bootstrap: Reorder 3 Columns On Small Screens

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 contained inside a single column, w

Solution 1:

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

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

Demo

Solution 2:

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-detailsh1 {
  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-detailsh1 {
    order: -1;
  }
}

<divclass="main-container"><divclass="item photo-container"><divclass="photo"></div></div><divclass="item product-details"><h1>Product name</h1><divclass="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-detailsh1 {
  background: #FAA;
}

.product-description {
  background: #FFA;
}

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

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  /><divclass="container"><divclass="row flex-column flex-sm-row"><divclass="col-12 col-sm-6 photo-container"><divclass="photo"></div></div><divclass="col-12 col-sm-6 product-details"><h1>Product name</h1><divclass="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>