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;
  }
}

  

    

  
  

    
Product name
    

      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.
    
  

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;
  }
}

  

    

      

    
    

      
Product name
      

        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.