Step1
首先，先設定好切換的連結，?mobile=on為電腦版，?mobile=off為手機版。
Step2
由於切換後，會不斷的換頁，因此這時使用了cookie來記錄使用的所設定的模式，同時比較重要的是，在切換為桌機版時，是需要CSS來進行控制，因此這時除了將CSS樣式直接寫在javascript中，也可存成css檔，再用載入的方式將CSS動態載入也可以。
$(function(){
var m = getVar("mobile");
if($.cookie("mobile") == null){
$.cookie("mobile","off");
}else{
if(m != false) {
$.cookie("mobile", m);
}
if($.cookie("mobile") == "on"){
mobileswitch();
}
}
});
function getVar(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
function mobileswitch(){
document.querySelector('style').textContent += "@media(max-width:768px){.container{width: 1170px;}.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left;}.col-md-12 {width: 100%;}.col-md-11 {width: 91.66666667%;}.col-md-10 {width: 83.33333333%;}.col-md-9 {width: 75%;}.col-md-8 {width: 66.66666667%;}.col-md-7 {width: 58.33333333%;}.col-md-6 {width: 50%;}.col-md-5 {width: 41.66666667%;}.col-md-4 {width: 33.33333333%;}.col-md-3 {width: 25%;}.col-md-2 {width: 16.66666667%;}.col-md-1 {width: 8.33333333%;}}";
}
Step3
這時只要按下電腦版，版面立即就會切換會桌機版模式，相當的方便喔!!
Step4
控制模式的切換，主要是透過網頁列上方的參數來作設定的，因此有需要手機與桌機版切換的朋友，也可試試看囉! 如有任何問題也歡迎討論。
[範例預覽] [範例下載]