CSSでHTMLの記述順とは異なる並び順にする

「float」、「position」使う方法

サイドバーを左、メインを右の表示にする(2カラム)

html

qiita.html

<div class="main">
    メイン
</div>
<div class="sidebar">
    サイドバー
</div>

css

qiita.css

.main {
    float: right;
    width: 70%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar {
    float: left;
    width: 30%;
    height: 300px;
    background: #CCC;
}

サンプル

サイドバーを左右、メインを中央の表示にする(3カラム)

html

qiita.html

<div class="box-left">
    <div class="box-mid">
        <div class="main">
            メイン
        </div>
        <div class="sidebar01">
            サイドバー01
        </div>
        <div class="sidebar02">
            サイドバー02
        </div>
    </div>
</div>

css

qiita.css

.box-left {
    position: relative;
    right: 25%;
}

.box-mid {
    position: relative;
    right: 50%;
}

.main {
    position: relative;
    left: 98%;
    float: left;
    width: 54%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar01 {
    position: relative;
    left: 21%;
    float: left;
    width: 23%;
    height: 300px;
    background: #CCC;
}

.sidebar02 {
    position: relative;
    left: 75%;
    float: left;
    width: 23%;
    height: 300px;
    background: #CCC;
}

サンプル

CSS3の「Flexbox」を使う方法

サイドバーを左、メインを右の表示にする(2カラム)

html

qiita.html

<div class="container">
    <div class="main">
        メイン
    </div>
    <div class="sidebar">
        サイドバー
    </div>
</div>

css

qiita.css

.container {
    display: flex;
}

.main {
    order: 2;
    width: 70%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar {
    order: 1;
    width: 30%;
    height: 300px;
    background: #CCC;
}

サンプル

サイドバーを左右、メインを中央の表示にする(3カラム)

html

qiita.html

<div class="container">
    <div class="main">
        メイン
    </div>
    <div class="sidebar01">
        サイドバー01
    </div>
    <div class="sidebar02">
        サイドバー02
    </div>
</div>

css

qiita.css

.container {
    display: flex;
}

.main {
    order: 2;
    width: 54%;
    height: 300px;
    background: #E3F0FB;
}

.sidebar01 {
    order: 1;
    width: 23%;
    height: 300px;
    background: #CCC;
}

.sidebar02 {
    order: 3;
    width: 23%;
    height: 300px;
    background: #CCC;
}

サンプル