Positioning paragraphs side by side, one underneath?

How did you create the contents of the box? Is it just hard-coded text/HTML?

What I would do is put each group in its own <div> with the same class like this:

<div class="rotation_box">
<p>Survival Drop Rotation</p>
<br />
<p>Rotation A: 5, 10, 25, 30, 45, 50 minutes; etc.</p>
<p>Rotation B: 15, 35, 55 minutes; etc.</p>
<p>Rotation C: 20, 40, 60 minutes; etc.</p>
</div>
<div class="rotation_box">
<p>Defense Drop Rotation</p>
<br />
<p>Rotation A: Wave 5, 10, 25, 30; etc.</p>
<p>Rotation B: Wave 15, 35; etc.</p>
<p>Rotation C: Wave 20, 40; etc.</p>
</div>
<div class="rotation_box">
<p>Interception Drop Rotation</p>
<br />
<p>Rotation A: Wave 1, 2, 5, 6; etc.</p>
<p>Rotation B: Wave 3, 7; etc.</p>
<p>Rotation C: Wave 4, 8; etc.</p>
</div>

Then I would add some CSS like this at the end of your child theme’s style.css file:

.rotation_box {
	margin-bottom: 20px;
}
.rotation_box p {
   padding: 0;
   margin: 0;
}
@media only screen and (min-width: 768px) {
   #target-id6006 .boxed {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 0;
   }
   .rotation_box {
      width: 50%;
      box-sizing:border-box;
      padding: 10px;
   }
}