Rearrange content based on window size

Question

I need to rearrange some content based on window/screen size.

This is how it looks when in full:

And this is what I need when screen size 768 or less:

This is my code structure:

<div class="container">
    <div class="row">
        <div class="col-md-9 site-main-content">
            <div class="content">
                <!--Main content-->
            </div>
        </div>

        <div class="col-md-3 site-sidebar-content">
            <div class="box-1"></div>
            <div class="box-2"></div>
            <div class="box-3"></div>
        </div>
    </div>
</div>

Not sure how to achieve this.

Update: I can not use hidden property. Box 1 contains some ajax search form. If I put it above main content (on full screen) and set display none, ajax form doesn't work anymore. So I am looking for a javascript snippet to remove box 1 from it's location and load it above main content when on smaller screen.

Answer 1

I have used hidden classes in my example please check and let me know...

Updated Fiddle

HTML

<div class="row">
  <div class="col-md-9">
      <div class="box-1 hidden-md hidden-lg">
        Box 1
      </div>
      <div class="mainBox">
        <div class="content">
          Main Content
        </div>
      </div>
  </div>
  <div class="col-md-3">
    <div class="box-1 hidden-xs hidden-sm">
      Box 1
    </div>
    <div class="box-2">
      Box 2
    </div>
    <div class="box-3">
      Box 3
    </div>
  </div>
</div>

CSS

.mainBox{
  background:green;
  min-height:300px;
  padding:10px;
  margin-bottom:10px;
}
.box-1{
  background:red;
  min-height:100px;
  padding:10px;
  margin-bottom:10px;
}
.box-2, .box-3{
  background:#00A2E8;
  min-height:100px;
  padding:10px;
  margin-bottom:10px;
}