レイアウト： "最大幅+中心のラッパー2列"伸縮オプション

Question

2列レイアウトのバリエーションを、基本的な最大幅+中心のラッパー（モバイルでは2番目の列がスタックする最初のものの下に）。 トリックは、大きな画面では、2番目の列が画面の右側に伸びるようにしたいと考えています。

私はフレキシボックスとcalc()を使用して、それを達成し、calc()がサポートされていない場合は、それが戻って定期的なレイアウトに落ちる：

サス：

$content-max-width: 500px; 
$horiz-padding: 50px; 
$minvw: $content-max-width + $horiz-padding * 2; 
/* decorations */ 
body { 
    margin: 0; 
    * { box-sizing: border-box; } 
    .wrapper { 
    & > * { 
     border: solid 2px #666; 
     min-height: 80vh; 
    } 
    .content { 
     box-shadow: 0 3px 8px rgba(0, 0, 0, .25) 
    } 
    .main { 
     min-height: 50vh; 
     background-color: #bbffbb; 
    } 
    .expanded { 
     background-color: #ffbbbb; 
     > * { 
     background-color: #ffffbb; 
     height: 100%; 
     } 
    } 
    } 
} 
/* mobile first */ 
.wrapper { 
    padding: 0 $horiz-padding; 
    .content { 
    max-width: $content-max-width; 
    margin: 0 auto; 
    } 
} 
/* large screen */ 
@media (min-width: $minvw) { 
    .wrapper { 
    display: flex; 
    padding-right: calc(0px); 
    .content { 
     flex-grow: 1; 
     display: flex; 
     max-width: calc(99999px);  
     margin: 0 0 0 calc((100vw - #{$content-max-width} - #{$horiz-padding}*2) * .5); 
    } 
    } 
    .main { 
    flex-basis: $content-max-width * .5; 
    } 
    .expanded { 
    flex-grow: 1; 
    > * { 
     width: $content-max-width *.5; 
    } 
    } 
} 

そして、HTMLマークアップを：

<div class="wrapper"> 
    <div class="content"> 
    <div class="main">main...</div> 
    <div class="expanded"> 
     <div>expanded...</div> 
    </div> 
    </div> 
</div> 

アクション中：https://jsfiddle.net/leonsaysHi/uu6gg7uj/

calc()がまだ広くサポートされていないため、これを達成するための解決策があるかどうかは疑問でした。

ありがとうございます。

編集：あなたは$ content-max-widthの値を変更して、どういう意味かを知ることができます。

第二編集：ここは私が達成しようとしているものを示す画像である。

Answer 1

あなたが求めている行動は、すべてのブートストラップや財団と箱から出しています。どちらのフレームワークでも、対応する列を列クラスを使用して簡単に作成できます。

<div class="col-md-3 col-sm-3 col-xs-12">First Column</div> 
<div class="col-md-9 col-sm-9 col-xs-12">Second Column</div> 

*これはあくまでも一例マークアップである - あなたは完全にあなたの希望する機能を実装するためのドキュメントを使用する必要があります。

コード内でこれらのdivの順序を変更すると、左/上に表示されるものが決まります。

W3Schoolsは質問自体にあなたのコードを含めてください、ブートストラップ