最佳HTML元素惯例

Question

我需要针对不同的屏幕尺寸重新排列HTML的顺序。在这里，我有手机所需的订单：

<div class="mb-20 flex flex-col justify-start md:flex-row">
  <a class="hover:underline" href="{{ $post_link }}"><h2 class="text-25 mb-6 md:w-4/5">{!! $post_title !!}</h2></a>
  <div class="mb-6 md:w-1/5 md:pr-10">
    <img src="{{ $post_thumbnail }}" alt="{{ $post_title }}" />
  </div>
  <div class="md:w-4/5">
    <p class="text-17">{!! $post_excerpt !!}...</p>
    <p class="my-6">
      @foreach($post_categories as $cat)
        <a class="inline-block text-white text-15 font-normal bg-gray-beethree px-2 py-1 btn border hover:text-gray-beethree hover:bg-white hover:border-gray-beethree" href="/blogs/{{ $cat->slug }}">#{{ str_replace('_', '', $cat->slug) }}</a>
      @endforeach
    </p>
  </div>
</div>

这是我需要大屏幕的顺序：

<div class="mb-20 flex flex-col justify-start md:flex-row">
  <div class="mb-6 md:w-1/5 md:pr-10 image-order">
    <img src="{{ $post_thumbnail }}" alt="{{ $post_title }}" />
  </div>
  <div class="md:w-4/5">
    <a class="hover:underline" href="{{ $post_link }}"><h2 class="text-25 mb-6 title-order md:w-4/5">{!! $post_title !!}</h2></a>
    <p class="text-17">{!! $post_excerpt !!}...</p>
    <p class="my-6">
      @foreach($post_categories as $cat)
        <a class="inline-block text-white text-15 font-normal bg-gray-beethree px-2 py-1 btn border hover:text-gray-beethree hover:bg-white hover:border-gray-beethree" href="/blogs/{{ $cat->slug }}">#{{ str_replace('_', '', $cat->slug) }}</a>
      @endforeach
    </p>
  </div>
</div>

什么是实现此目的的最佳方法？

Answer 1

如何在一个不同的文件中制作这两个代码示例，并使用任何延迟加载插件（或构建自己的插件），这样您就可以知道设备最终用户正在使用的设备，并且只要他滚动并需要显示您的html，呈现所需的html标记。这样，您将依靠javascript（库）来更准确地确定用户所使用的设备，这将使您的网站更快。希望这会有所帮助。