<div class="wrapper">
  <div>0001</div>
  <div>0002</div>
  <div>0003</div>
</div>
<button class="theWae">toggle</button>




<svg display="none">
  <filter id="turbulence-1">
    <feTurbulence type="fractalNoise" baseFrequency="0.001" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-2">
    <feTurbulence type="fractalNoise" baseFrequency="0.0015" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-3">
    <feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-4">
    <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-5">
    <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

</svg>

.wrapper{
  outline: 2px dashed;
  width: 70vw;
  height: 90vh;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  opacity: 0.9;
}
.wrapper div{
  border: 2px solid;
  margin: 3px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper div:nth-child(1){
  background-color: red;
  height: calc(50% - 6px);
  width: calc(70% - 3px);
}
.wrapper div:nth-child(2){
  background-color: green;
  height: calc(50% - 6px);
  width: calc(70% - 3px);
}
.wrapper div:nth-child(3){
  background-color: orange;
  height: 100%;
  width: calc(30% - 9px);
}


/* OF THE DEVAL */
.wrapperMod1{
  width: 85vw;
  height: 90vh;
  flex-wrap: nowrap;
}
.wrapperMod1 div:nth-child(1),
.wrapperMod1 div:nth-child(2),
.wrapperMod1 div:nth-child(3){
  width: 100%;
  height: auto;
  flex: 1 0 0;
}
.wrapperMod1 div:nth-child(1){
  order: 1;
}
.wrapperMod1 div:nth-child(2){
  order: 3;
}
.wrapperMod1 div:nth-child(3){
  order: 2;
  flex: 2 0 0;
  
}



.theWae{
  display: inline;
  font-size: 20px;
  margin: 20px;
  margin-left: 1vw;
  margin-right: 0;
  padding: 0;
  cursor: pointer;
  
}

body{
  background-image: url(https://images.unsplash.com/photo-1480098892944-59bed1f90f35?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: 100%;
  margin: 0;
  margin-top: 5px;
  margin-left: 5px;
  filter: blur(1px) drop-shadow(12px 12px 15px whitesmoke);
}




/* //UNRELATED */

@keyframes squigglevision {
  0% {
    filter: url("#turbulence-1");
  }
  25% {
    filter: url("#turbulence-2");
  }
  50% {
    filter: url("#turbulence-3");
  }
  75% {
    filter: url("#turbulence-4");
  }
  100% {
    filter: url("#turbulence-5");
  }
}

document.getElementsByClassName('theWae')[0].addEventListener('click', togg)
function togg(e){
  document.getElementsByClassName('wrapper')[0].classList.toggle('wrapperMod1')
}