写真と文字の回り込み

写真と文字の横レイアウト。
幅が狭い時は、文字が写真の下に回り込む。

<section class="sec01">
	<figure><img src="pic01.jpg" alt=""></figure>
	<section class="sec01__01">
		<h3>サブタイトル</h3>
		<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
		<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字</p>
	</section>
</section>

.sec01 {
	&::after{
		content: "";
		clear: both;
		display: block;
	}
	+ .sec01 {
		padding-top: 5em;
		@include sm {
			padding-top: 4em;
		}
	}
	@include sm {
		clear: none;
		display: flex;
		flex-direction: column-reverse;
	}
	&:nth-child(odd) {
		figure {
			float: right;
			margin: 0 0 3em 3em;
			@include xl {
				margin: 0 0 3em 3em;
			}
			@include lg {
				margin: 0 0 3em 3em;
			}
			@include md {
				margin: 0 0 3em 3em;
			}
			@include sm {
				float: none;
				margin: 2em auto 0;
			}
		}
	}
	&__01 {//文章
		@include lg {
		}
		@include md {
		}
		@include sm {
			width: 100%;
		}
		h3 {//サブタイトル
			font-weight: 600;
			font-size: clamp(1.1em, 3vw, 1.4em);
			margin-bottom: 1em;
		}
		p {
			text-indent: 1em;
			+ p {
				margin-top: 1em;
			}
		}
	}
	figure {//写真
		float: left;
		width: 26em;
		margin: 0 3em 3em 0;
		@include xl {
			margin: 0 3em 3em 0;
		}
		@include lg {
			width: 22em;
			margin: 0 3em 3em 0;
		}
		@include md {
			width: 18em;
			margin: 0 3em 3em 0;
		}
		@include sm {
			width: 80%;
			float: none;
			margin: 2em auto 0;
		}
		@include xs {
			width: 85%;
		}
		img {
		}
	}
}