Toggle between webpage layout (phone/laptop) with javascript, jquery, bootstrap

First you create an iframe and load the content of your website into the iframe asynchronously.

<iframe id="media-simulator" class="embed-responsive-item"></iframe>

<script>
$(document).ready(function(){
    $('#media-simulator').load('/includes/main-page.html');
})
<script>

The media queries defined in Bootstrap will be sensitive to the iframe's width. Therefore you can define the widths you want to simulate in your CSS code and then later on add this classes with jQuery to your iframe:

.xs {
  width: 375px;
}

.sm {
   width: 576px
}

.md {
   width: 768px
}

.lg { 
   width: 992px
}

.xl {
   width: 1200px
}

And finally write click handlers for your buttons to toggle the wanted class, e.g. the event handler to toggle mobile preview:

$('.button-xs').click(function() {
  $('#media-simulator').removeClass('sm');
  $('#media-simulator').removeClass('md');
  $('#media-simulator').removeClass('lg');
  $('#media-simulator').removeClass('xl');

  $('#media-simulator').addClass('xs');
})