Css 如何在Bootstrap 5上使用移动设备居中内容

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex flex-wrap flex-sm-nowrap mb-0">
  <div class="text-center mx-auto">
    <!--begin::Image-->
    <div class="d-flex justify-content-center align-items-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4 border border-secondary">
      <img class="mw-50px mw-lg-75px" src="https://via.placeholder.com/100" alt="image">
    </div>
    <!--end::Image-->
  </div>
  <!--begin::Wrapper-->
  <div class="flex-grow-1">
    <!--begin::Head-->
    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
      <!--begin::Details-->
      <div class="d-flex flex-column text-sm-start text-center">
        <!--begin::Status-->
        <div class="align-items-center mb-1">
          <a class="text-gray-800 text-hover-primary fs-2 fw-bold me-3" href="#">Title Subject</a>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">Location</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">title subject2</span>
          <span class="badge text-bg-primary badge-info me-sm-auto mx-auto d-sm-inline d-table">Badge</span>
        </div>
        <!--end::Status-->
        <!--begin::Description-->
        <div class="d-flex flex-wrap fw-semibold justify-content-sm-start justify-content-center">
          <span class="me-2 fs-5 text-white-400">Status</span>
          <span class="mb-0 fs-5 text-white-400">
            <em>unknown yet</em>
          </span>
        </div>
        <!--end::Description-->
        <!--begin::User id-->
        <div class="d-flex flex-wrap fw-semibold mb-0 fs-5 text-gray-400 d-none" id="legal_case_id">20</div>
        <!--end::User id-->
      </div>
      <!--end::Details-->
    </div>
    <!--end::Head-->
    <!--begin::Info-->
    <div class="d-flex flex-wrap justify-content-start">
      <!--begin::Stats-->
      <div class="row d-flex flex-wrap w-100">
        <!--begin::Stat-->
        <div class="col-sm-auto col-6">
          <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
            <!--begin::Number-->
            <div class="d-flex align-items-center">
              <div class="fs-4 fw-bold">27 Jun, 2023</div>
            </div>
            <!--end::Number-->
            <!--begin::Label-->
            <div class="fw-semibold fs-6 text-gray-400">event from mob</div>
            <!--end::Label-->
          </div>
        </div>
        <!--end::Stat-->
        <!--begin::Stat-->
        <div class="col-sm-auto col-6">
          <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
            <!--begin::Number-->
            <div class="d-flex align-items-center">
              <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="0" data-kt-initialized="1">0</div>
            </div>
            <!--end::Number-->
            <!--begin::Label-->
            <div class="fw-semibold fs-6 text-gray-400">Files</div>
            <!--end::Label-->
          </div>
        </div>
        <!--end::Stat-->
      </div>
      <!--end::Stats-->
    </div>
    <!--end::Info-->
  </div>
  <!--end::Wrapper-->
</div>