Adaptive layout or how to swap blocks?

Question

css

Let's say we have the following markup:

<div id="container">
    <div class="box big b1">1</div>
    <div class="box small b2">2</div>
    <div class="box small b3">3</div>
    <div class="box small b4">4</div>
    <div class="box wide b5">5</div>
    <div class="box small b6">6</div>
    <div class="box small b7">7</div>
    <div class="box small b8">8</div>
    <div class="box small b9">9</div>
    <div class="box small b10">10</div>
    <div class="box small b11">11</div>
    <div class="box wide b12">12</div>
    <div class="box small b13">13</div>
    <div class="box small b14">14</div>
    <div class="box small b15">15</div>
  </div>

#container {
  width: 100%;
  padding-top: 20px;
}
.box {
  float: left;
  margin-right: 20px;
  margin-bottom: 22px;
  background: #aaa;
}
.big {
  width: 520px;
  height: 632px;
}
.small {
  width: 250px;
  height: 305px;
}
.wide {
  width: 520px;
  height: 305px;
}

How can I change blocks 2-3 to 5, etc. when switching to "mobile"?

Answer 1

see how it's done in uikit flex