css - 携帯電話の場合、コンテンツ div の下に 2 つのサイドバーを表示しますか?

Question

テンプレートに 2 つのサイドバーがあり、デスクトップ コンピューターでの出力は次のようになります。

<!--sidebar one--><!--content--><!--sidebar two-->

This Fiddleのように。これはまさに私が望むように見えます。

デスクトップレイアウトの私のコード:

<div class="wrapper">
<div class="sidebar_one">Sidebar one</div>
<div class="content">This is a content</div>
<div class="sidebar_two">Sidebar two</div>
</div>

携帯電話では、コンテンツ div の下に 2 つのサイドバーを配置したいと考えています。

したがって、出力は次のようになります。

<!--content-->
<!--sidebar one-->
<!--sidebar two-->

This Fiddle Now のように

、私の問題は、HTML コードを次のように変更せずにコンテンツの下にサイドバーを配置する方法がわからないことです。

 <div class="wrapper">
 <div class="content">This is a content</div>
 <div class="sidebar_one">Sidebar one</div>
 <div class="sidebar_two">Sidebar two</div>
 </div>

明らかに、これは電話では見栄えがしますが、デスクトップ コンピューターでは、サイドバーはコンテンツ divの下に残ります。

だから私の質問は次のとおりです。最初のコードを調整して、最初のフィドルでコンテンツを中央に表示し、デスクトップコンピューターの場合は左側に 1 つのサイドバー、右側に別のサイドバーを表示し、携帯電話の場合はコンテンツの下に 2 つのサイドバーを表示することは可能ですか? ?