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

Question

I have a webpage with certain html elements with bootstrap classes.

<div class="col-xs-12 col-lg-4"></div>

I want to give a button when clicked, should toggle viewport/layout change of divs on webpage. On click of that button, I should be able to see realtime change of layout and bootstrap trigger "col-xs-12" for mobile view and "col-lg-4" for laptop view. I dont know which css or bootstrap or html property I am looking for.

Any help will be much appreciated.

EDIT - Use case - I am giving a screen for user to edit CSS and classes. I want to give toggle button to user, so that he can see how his elements will look like in laptop view and mobile view.

Answer 1

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');
})

Answer 2

As discussed here, media queries can only detect the device width and not an element's width.

Your best bet would be to use a JavaScript shim like the CSS Element Queries polyfill that adds support for element based media-queries to all new browsers (IE7+).

As stated in the polyfill's official Docs, CSS Element Queries not only allows you to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported) size while not causing performance lags due to event based implementation.

---

Check this JSFiddle or the Code Snippet below to see how this polyfill adds new element attributes with the ~= attribute selector on the DOM element depending on your actual CSS and element's dimension:

/* CSS */

.widget-name h2 {
    font-size: 12px;
}

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

.widget-name[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.widget-name[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

<!-- HTML -->

<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ElementQueries.js"></script>

<div class="widget-name">
  <h2>Element responsiveness FTW!</h2>
</div>