レスポンシブ対応で右カラムのコンテンツを上に表示させたい

2020/07/01

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTMLを上から書いていくと最初に左カラム部分の作成し、次に右カラム部分を書くことになる。ただ、スマホで閲覧した際に右カラム部分を上部に、左カラム部分を下部に表示させたかった。以下に方法をメモ。

HTML部分

<div class="container">

	<div class="right">
		right
	</div>

	<div class="left">
		left
	</div>

</div>

right

</div>

left

</div>

CSS

.container{
	display: flex;
	max-width: 100%;
}
.left{
	width: 50%;
	height: 500px;
	background-color: #555;
	order: 1;
}
.right{
	width: 50%;
	height: 500px;
	background-color: #f00;
	order: 2;
}

@media screen and (max-width: 700px) {
	.container{
		display: inline-block;
		width: 100%;
		max-width: 100%;
	}

	.left{
		width: 100%;
		max-width: 100%;
	}

	.right{
		width: 100%;
		max-width: 100%;
	}
}

.container{

display: flex;

max-width: 100%;

}

.left{

width: 50%;

height: 500px;

background-color: #555;

order: 1;

}

.right{

width: 50%;

height: 500px;

background-color: #f00;

order: 2;

}

@media screen and (max-width: 700px) {

.container{

display: inline-block;

width: 100%;

max-width: 100%;

}

.left{

width: 100%;

max-width: 100%;

}

.right{

width: 100%;

max-width: 100%;

}

HTMLソースを見た限りだと.rightが左にきそうだが、CSSのorderを指定することで順序を決められる。ディスプレイ横幅が700px以下になるとそれが解除され、HTMLソースどおり.rightが上に来る。

- CSS

: cssのcontent

テキストが書かれているけど、firebugで要素を見ても書かれていない。かとい ...

: 上部に固定されたヘッダーメニューの作成

■やりたい事ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

: firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

: CSSでセンターリング

<center></center>でセンターリングが出来 ...

: jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

: CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、やり方が分からなか ...

: CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。リンク時に一律させた方がよいと ...

: LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

: Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、と思っていいものはないか ...

: CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、ということがたまにある。 ...

PREV: Class ‘DOMDocument’ not foundエラーの対処
NEXT: leaflet.jsとOSMで現在地の取得

レスポンシブ対応で右カラムのコンテンツを上に表示させたい

HTML部分

CSS

関連記事