4つの<div>要素のレスポンシブの方法。メディアクエリの設定を教えてください。

Question

<div class="header03">の中の <div class="header0302">と <div class="header0304">を

スマホで見たときに、下の段というか、二行にしたいです。
コードを教えていただきたいです。

		<div class="header03">
			<div class="header03menu">
				<div class="header0301">
					<img src="assets/images/logo02.png">
				</div>

					
					<div class="header0302">
						<div class="cp_ipselect cp_sl01">
							<select required>
								<option value="" hidden>全てのカテゴリー</option>
								<option value="1">ビューティ・コスメ</option>
								<option value="2">ビューティ・コスメ</option>
								<option value="3">ビューティ・コスメ</option>
								<option value="4">ビューティ・コスメ</option>
							</select>
						</div>
					</div>
					<div class="header0304">
						<form action="" method="post">
							<input type="search" name="q" value="" placeholder="キーワードや商品番号を探す"><input type="submit" name="btn_search" value="検索">
						</form>
					</div>

					<div class="header0303">
						<div class="iconmenu" >
							<a href=""><img src="assets/images/icon01.png">
								<p>閲覧履歴</p></a>
							</div>
							<div class="iconmenu">
								<a href=""><img src="assets/images/icon02.png">
									<p>ログイン</p></a>
								</div>
								<div class="iconmenu">
									<a href=""><img src="assets/images/icon03.png">
										<p>お気に入り</p></a>
									</div>
									<div class="iconmenu">
										<a href=""><img src="assets/images/icon04.png">
											<p>カート</p></a>
										</div>
									</div>
								</div>
							</div>

.header03{ margin-top: 20px; }
.header03menu{display:flex; justify-content: center;}

.header0302{padding-left: 30px; }

.cp_ipselect {overflow: hidden;	width: 100%;margin: 2em auto;	text-align: center;}
.cp_ipselect select {	width: 100%;	padding-right: 1em;	cursor: pointer;	text-indent: 0.01px;	text-overflow: ellipsis;	border: none;outline: none;background: transparent;	background-image: none;	box-shadow: none;	-webkit-appearance: none;	appearance: none;}
.cp_ipselect select::-ms-expand { display: none;}
.cp_ipselect.cp_sl01 {	position: relative;	border: 1px solid #bbbbbb; background: #ffffff; margin: 0;}
.cp_ipselect.cp_sl01::before {position: absolute;top: 1em;right: 0.9em;width: 0;height: 0;padding: 0;	content: '';border-left: 6px solid transparent;	border-right: 6px solid transparent;border-top: 6px solid #666666;pointer-events: none;}
.cp_ipselect.cp_sl01 select {	padding: 8px 38px 8px 8px;	color: #666666;}


input[type=search] {	-webkit-appearance: none;	display: inline-block;	margin-right: 0;	padding: 10px;width: 300px;height: 39px;font-size: 100%;	box-sizing: border-box;	border: 1px solid #ccc;	border-right: none;}
input[type=submit] {	-webkit-appearance: none;	display: inline-block;	padding: 0 10px;	color: #fff;	width: 50px;	height: 39px;	font-size: 100%;	vertical-align: top;	border: none;	background: #d65353;}



  /*---Sm---*/
  @media only screen and (max-width: 767px) {


}

どうか、よろしくお願い致します。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

@media only screen and (max-width: 767px) {
.header03menu{display:grid; justify-content: center; grid-template-columns: auto auto;}
.header0302{ order: 1; }
.header0304{ order: 1; }
}

Comments

[rola.716]

出来ました。
ありがとうございます！！助かりました。