html - css two columns - one fixed width -

i want have 2 columns (content , sidebox), sidebox have fixed width , content shrink necassary.

at point, both stack 100% width, want have content first. problem solution sidebox comes first.

i don't want use floats , percentage because don't want shrink sidebox.

html:

    <aside class="sidebox"> <!-- don't want come first after media query applied -->         sidebox     </aside>     <section class="content">         content     </section> 

css:

.content {     margin-right:200px;     height:100px;     background-color:red; }  .sidebox{     width:180px;     float:right;     height:100px;     background-color:yellow; }   @media (max-width: 500px) {     .sidebox {         float:none;         width: auto;      }      .content {          margin-right:0px;       }  } 

demo: https://jsfiddle.net/72lad2zf/

you can use following:

.container {      display:table;      width:100%;  }  .content {      display:table-cell;      height:100px;      background-color:red;  }  .sidebox {      display:table-cell;      width:180px;      height:100px;      background-color:yellow;  }  @media (max-width: 500px) {      .content, .sidebox {          width:100%;          display:block;      }  }

<div class="container">      <section class="content">content</section>      <aside class="sidebox">sidebox</aside>  </div>

updated fiddle