Как позиционировать HTML таблицы?

Question

[vrpk34]

Как позиционировать HTML таблицы без дополнительной вложенности тегов tr, td и table ?
Нужно чтобы при просмотре на экране меньше 600px? картинка была над заголовком и текстом
код сверсткой

Это фрагмент верстки email письма, css flex, grid не используется.

Comments

[Ankhena]

Начать нужно с того, что таблицами верстаются только табличные данные.
Т.е. разметка должна быть какой-то такой:

<section class="">
               <a href="#"><img src="https://i.ibb.co/KWqbcvP/Screenshot-2.png" ></a>

               <h2 class="h2-cp">Lorem ipsum dolor sit.</h2>

               <p class="text-cp">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                 Cum, molestias quae? Libero itaque aperiam dicta 
                 veritatis quo nostrum facilis expedita!
               </p>
</section>

Ну и всё, дальше гридами или флексами и с помощью order поменять порядок элементов.

[vrpk34]

Ankhena, Здравствйте.
это верстка HTML письмо.
Флексами и гридами это не проблема стоит т вопрос чтобы обойтись только теми тегами что есть в коде потомучто использовать section, flex в Html письме просто нельзя если было бы можно все верстали не парились гридами и флексами но увы в письмах такое не прокатывает

[Антон Литвиненко]

Если это письмо вам придется делать таблицы в ячейках и таблицами погонять. вот пример не очень большого письма...
хотел прикрепить вам разметку небольшого письма но валидатор ругается что нельзя больше 10 тысяч символов, а там 46

https://mjml.io/try-it-live/templates/christmas
там справа есть view html

[Ankhena]

vrpk34, Тогда в одну ячейку и что-нибудь типа float left картинке.
И минимальную ширину заголовку и тексту.

Как перестанет влезать, так перенесется вниз.

Но я не гуру в письмах.

[Алан Гибизов]

Используйте кнопку + в редакторе вопроса для вставки codepen.

[vrpk34]

Алан Гибизов,

[Алан Гибизов]

vrpk34, :) я вам в вопросе уже поправил. Будьте внимательней.

Answer 1

[vrpk34]

Решил вопрос таким образом

Answer 2

[imko]

Одна ячейка с двумя inline элементами определенной ширины, либо с минимальной, строка сама перенесется когда ей не хватит места)

Comments

[vrpk34]

Надо чтобы это было только когда ширина экрана меньше 600px а придекстопном также и оставалась. Когда уменьшаю экран, заголовок с текстом перескакивает вниз под картинку, так нужно

[vrpk34]

знаю как это сделать с добавлением вложенности но условие без лишней вложенности максимально задействовать свойства элементов без иннеров

[imko]

vrpk34, письма не шарят в медиа запросы

[vrpk34]

письмо можно посмотреть на мобильном устройстве.