How should I handle DOM changes in responsive design?

Question

I am coding a responsive website (say one breakpoint so everything is ok) and it will look like this:

Wide screens:

=================
     HEADER 
=================

      HERO

=================
  NAV  | SEARCH
-----------------

Narrow screens:

=================
     HEADER 
=================
  NAV  | SEARCH
-----------------

      HERO

=================

As you can see, this is not just about CSS and media queries. There is some restructuring of the DOM. Obviously, this is a simplified example, and it may make sense to serve completely different HTML files depending on the size of the viewport.

But ... what if the code is 90% identical between widescreen and narrowscreen versions? Of course, it is not recommended to duplicate all this code when only a few elements move in the DOM tree.

My approach right now:

<header>...</header>
<section class="hero">...</section>
<section class="controls">
  <nav>...</nav>
  <form class="search">...</form>
</section>

<script>
  if(viewport.width < 768){
    $('.controls').insertAfter('header');
  }
</script>

jQuery, . .

?

---

: , display: table . . flexbox, , .

Answer 1

- CSS . - ( ):

#container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
    }

#div-1 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

#div-2 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1
}

, .

Answer 2

CSS: http://cdpn.io/Gqfad

, CSS - .

CSS

.header{ 
  display:table-header-group;
}
.nsWrap{
   display: table-footer-group;
}
.nav{
  width:50%;
  float: left;

}
.search{
  width:50%;
  float: right;
}
.hero{
   display: table-row-group;
}

 .tableWrap{
   display:table; 
   width:100%;
 }


@media (max-width: 767px){
  .nsWrap{
      display: table-row-group;
  }

}    

HTML

<div class="tableWrap">
  <div class="header">HEADER</div>

  <div class="nsWrap">
    <div class="nav">NAV</div>
    <div class="search">SEARCH</div>
  </div>

 <div class="hero">HERO </div> 

</div>  

http://css-tricks.com/almanac/properties/d/display/ CSS.

!

Answer 3

CSS!

<style>
@media screen and (min-width: 768px){
    .nav-search {
        position: absolute;
        bottom: 0px; 
    }
}
</style>

, / "nav-search". css html / . Javascript!

, @media: http://css-tricks.com/css-media-queries/.