html - 试图让一个 flexbox 开始排成一行，响应时上下移动不同的 div

Question

我一直在尝试为我正在制作的网站构建页脚，我需要它能够响应。我研究过做一个 flex-box 来匹配设计，因为当它响应屏幕尺寸时，它的一部分向上移动，而其他部分向下移动。但我似乎无法让它发挥作用。

以下是普通全屏页脚和响应式页脚的设计:

这是我到目前为止编写的代码:

/* Footer SCSS */

.site__ftr {
	background-color: $green;
	width: 100%;
	@include curvededges();
	overflow-x: hidden;
	margin: 0 auto;
	padding: 2em;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	a {
		text-decoration:none;
	}
	main, div {
		display: flex;
		padding: 1em;
}
}
.flex_grid {
	
}

.col {
	flex: 1;
	width: 30%;
}
.col_one {
	flex: 0 0 30%;
}
.col_two {
	flex: 0 0 40%;
}
.col_three {
	flex: 0 0 30%;
}
@include respond($tablet) {
	.col div {
		flex: 1;
		width: 50%;
  }
	.col_one {
		order: -1;
		flex: 2;
  }
	.col_two {
		flex: 5;
  }
	.col_three {
		flex: 1;
		order: -1;
		width: 50%
  }
	.col_four {
		flex: 5;
		order: 2;
	}
}

<footer class="site__ftr">
	<div class="flex_grid">
		<div class="col col_one">
			<div class="find_div">
			<h3>How to find us</h3>
				<div class="grey_mail left">
				<?php echo file_get_contents("_assets/core-images/icons/email-grey-01.svg"); ?>
				</div>
				<div class="address">
					<p></p>
				</div>
				<div class="grey_phone left">
				<?php echo file_get_contents("_assets/core-images/icons/phone-grey-01.svg"); ?>
				</div>
			<div class="number">
				<p id="number" href="tel:"></p>
				</div>
			</div>
		</div>
		<div class="col col_two">
			<div id="location">
				<div class="map">
            <iframe src="URL"></iframe>
				</div>
				<div id="mob_ftr">
					<div id="times">
            		<h3>Opening Times</h3>
            			<div id="days">
            			<p>Mon-Fri:</p><p>00:00 - 00:00</p><p>Sat-Sun:</p><p>00:00 - 00:00</p>
            		</div>
           			<button id="donate" class="btn pink small">Donate now</button>
        		</div>
        	</div>
			</div>
		</div>
		<div class="col col_three">
			<div class="mailing_list">
				<h3>Join our mailing list</h3>
				<div class="container">
				<form method="post" name="mailing_list_form" action="" class="contact_form">
				<div class="row">
						<div class="col-100">
							<input type="text" name="name" placeholder="Name">
						</div>
					</div>
					<div class="row">
						<div class="col-100">
							<input type="email" name="email" placeholder="Email Address">
						</div>
					</div>
					<div class="row bottom">
						<div class="col-70">
							<a href="newsletter.php" class="btn_link"><button id="newsletter" class="btn green small left">View previous newsletter</button></a>
						</div>
						<div class="col-30">
							<input type="submit" value="Join" class="btn pink small left" id="mailing_join">
						</div>
					</div>
				</form>
				</div>
				</div>
		</div>
		<div class="col col_four">
			<div class="follow_us">
			<h3>Follow Us:</h3>
				<a href="">
					<?php echo file_get_contents("_assets/core-images/icons/facebook-01.svg"); ?>
					</a>
					<a href="">
					<?php echo file_get_contents("_assets/core-images/icons/twitter-01.svg"); ?>
					</a>
					<a href="">
					<?php echo file_get_contents("_assets/core-images/icons/instagram-01.svg"); ?>
					</a>
			</div>
		</div>

Answer 1

您可以使用 flexbox对于页脚并操纵 order媒体查询中元素的属性。

* {
  box-sizing: border-box;
}

footer {
  display: flex;
  width: 100%;
}

footer>div {
  border: thin solid black;
  width: 25%;
  height: 100px;
}

@media only screen and (max-width: 600px) {
  footer {
    flex-wrap: wrap;
  }
  .div1 {
    width: 50%;
  }
  .div2 {
    order: 3;
    width: 100%;
  }
  .div3 {
    order: 2;
    width: 50%;
  }
  .div4 {
    width: 100%;
    order: 4;
  }
}

<footer>
  <div class="div1">How to find us</div>
  <div class="div2">Map</div>
  <div class="div3">Opening times</div>
  <div class="div4">Join our mailing list</div>
</footer>