Aufzählung neben Text

Hallo alle zusammen,

Ich dachte, ich hätte es richtig gemacht, aber es kommt nicht so, wie ich es gerne hätte.

<h2>Tischgarnitur Vorlage</h2>
</div>
<div class="tblBoxTexte">
<div class="tblBoxOne">Lyric</div>
<div class="tblBoxOne">
<ul>
 	<li class="tblBoxOne">Fach</li>
</ul>
</div>

Ich möchte, dass auf einem breiten Bildschirm (PC) die beiden tblBoxOne nebeneinander stehen, während auf einem schmalen Bildschirm (Handy) die Boxen untereinander sind.

div.tblBoxTexte{
 background: #E6E6E6;
 margin: 1px;
 border-radius: 15px 15px 15px 15px;
 border-color: DarkSlateGray;
 border-width: 0px;
 border-style: none;
 display: flex;
 flex-wrap: wrap;
}

div.tblBoxOne{
 background: #E6E6E6;
 margin: 1px;
 padding: 1em;
 box-sizing: border-box;
 border-radius: 15px 15px 15px 15px;
 border-color: DarkSlateGray;
 border-width: 0px;
 border-style: solid;
 display: flex;
}

Die Webseite wäre https://naturalstone.ch/produkte/granittisch/#uebersicht

Vielen Dank für jede Info welche die Boxen nebeneinander bringt wenn es genügend Platz hat.

Mega super vielen Dank. Wow, habe es eingebaut und sogar die "Weiche" für kleine und grosse Bildschirme gefunden.
Konnte sogar für PC einen weissen Rand um die beiden Texte machen während auf dem kleinen Smartphone keine Rahmen sind und alles ganz eng ist...

Du hast ein mega super Forum. Vielen lieben Dank.