Flexboxで画像とテキストを交互に横並び

Question

前提・実現したいこと

上の画像のように一段目を左側に画像、右側にテキストに、二段目を右側に画像、左側にテキストにFlexboxを使用して表示させたいです。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

![
現在のコードはこんな感じに打ちました。

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[dit.]

コードは画像ではなく文字をコピペして提示してください。
コードのマークダウンについてはこちらもご覧ください。
https://teratail.com/help/question-tips#questionTips3-5-1
https://teratail.com/questions/238564

具体的には
```html
ここにHTMLのコード
```
1行以上開ける
```css
ここにCSSのコード
```
という状態にしてください。

Answer 1

<style>
.box{
display:flex;
justify-content:center;
}
.box div{
width:48%;
}
.box div:nth-child(1){
  background-Color:yellow;
}
.box div:nth-child(2){
  background-Color:lime;
}
.box:nth-child(2n){
  flex-direction : row-reverse
}
</style>
<div class="box">
<div>img</div>
<div>text</div>
</div>
<div class="box">
<div>img</div>
<div>text</div>
</div>
<div class="box">
<div>img</div>
<div>text</div>
</div>
<div class="box">
<div>img</div>
<div>text</div>
</div>

Answer 2

.boxを囲う形になるように<div class="boxcontainer">を追加し、奇数の方の.boxの配置を右から左になるようにしてみました（flex-direction: row-reverse;）
※質問に提示のCSSはほぼ無視しています。

<div class="boxcontainer">

  <div class="box">
    <div class="text">
      <h2>title1</h2>
      <p>text1</p>
    </div>
    <div class="pict">
      <img src="http://placehold.jp/808080/ffffff/300x200.png?text=dammy%20image">
    </div>
  </div><!-- /.box(1) -->

  <div class="box">
    <div class="text">
      <h2>title2</h2>
      <p>text2</p>
    </div>
    <div class="pict">
      <img src="http://placehold.jp/808080/ffffff/300x200.png?text=dammy%20image">
    </div>
  </div><!-- /.box(2) -->

</div><!-- /.boxcontainer -->

.box {
  display: flex;
}
.box > div {
  width: 50%;
}
.pict img {
  width: 100%;
  height: auto;
}
.boxcontainer .box:nth-child(odd) {
  flex-direction: row-reverse;
}

余白とか気にせず単純に記載したサンプル（上記のコード）
見た目も少し整えたサンプル

ご参考まで。