Пытаясь заставить flexbox начать выстраиваться в ряд, перемещайте различные деления вверх и вниз при реагировании

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

Вы можете использовать макет Grid и позволить свойству grid-template-areas размещать все различные модули, включенные в их различные положения.

Codepen Demo

В этом примере точка останова установлена ​​на 1000px.Стоит отметить, что при таком подходе у вас также есть визуальное представление размещения всех блоков внутри стиля, что позволяет сразу определить их правильное положение или изменить его.

---

Разметка

<footer>
  <div class="contacts">Contacts</div>
  <div class="openings">Openings</div>
  <div class="followus">Follow us</div>
  <div class="donate">Donate</div>
  <div class="map">Map</div>
  <div class="joinus">Join us</div>
</footer>

CSS

.map      { grid-area: map; }
.joinus   { grid-area: joinus; }
.donate   { grid-area: donate; }
.contacts { grid-area: contacts; }
.openings { grid-area: openings; }
.followus { grid-area: followus;  }


/* mobile/tablet style */
footer {
  display: grid;
  grid-gap: 2px;
  grid-template-rows: 150px 50px 50px 250px 200px;
  grid-template-areas: 
    "contacts openings"
    "contacts followus"
    "donate donate"
    "map map"
    "joinus joinus"
}


/* desktop style */    
@media all and (min-width: 1000px) {
  footer {
    grid-template-rows: 250px 100px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    "contacts map openings joinus" 
    "contacts map donate followus"
  }
}

---

Окончательный результат

Answer 2

Вы можете использовать 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>