Flexbox Example 01

Push, change on breakpoint, change order ...

by Andreas Burg

HTML

<div class="wrapper">
  <div class="item_1">content 1 Logo</div>
  
  <div class="item_2">content 2 reservieren long text long text long text long text long text long text long text long text</div>
  
  <div class="item_3">content 3 Adresse</div>
  
  <div class="item_4">content 4 Facebook auto height demo auto height demo auto height demo auto height demo</div>
  
  <div class="item_5">content 5 Navi</div>
</div>

CSS

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.wrapper > div {
  width: 33.33%;
  border: 1px solid gold;
  box-sizing: border-box;
}
.item_1 {
  margin-left: 33.33%;
}
 
@media (max-width: 960px) {
  .wrapper {
    flex-flow: column nowrap;
  } 
  .wrapper > div {
    margin: 0;
    width: auto;
  }
  .item_2 {
    order: -1;
  } 
}