<div class="ms-left"> <div class="ms-section" id="left1"> <h1>Left 1</h1> </div> <div class="ms-section" id="left2"> <h1>Left 2 </h1> </div> <div class="ms-section" id="left3"> <h1>Left 3</h1> </div> </div> <div class="ms-right"> <div class="ms-section" id="right1"> <h1>Right 1</h1> </div> <div class="ms-section" id="right2"> <h1>Right 2</h1> </div> <div class="ms-section" id="right3"> <h1>Right 3</h1> </div> </div>

How can I change the place of blocks by id=right * after 1000px races. the screen? and each block id=right * must appear after the block id=left *

For example:

  <div class="ms-section" id="left1"> <h1>Left 1</h1> </div> <div class="ms-section" id="right1"> <h1>Right 1</h1> </div> <div class="ms-section" id="left2"> <h1>Left 2</h1> </div> <div class="ms-section" id="right2"> <h1>Right 2</h1> </div>
  • @media (scc) - will not suit you? - Brave_Lime
  • fit, but how? - WebJunior

1 answer 1

CSS:

 @media (min-width: 1000px) { .left,.right { float:left; width:50%; } } @media (max-width: 999px) { .left,.right { float:left; width:100%; } }

HTML:

 <div class="ms-section left" > <h1>Left 1</h1> </div> <div class="ms-section right" > <h1>Right 1</h1> </div> <div class="ms-section left" > <h1>Left 2</h1> </div> <div class="ms-section right" > <h1>Right 2</h1> </div>