TiendaFront/src/view/PersonalData.vue

<template>
  <div>
<Header></Header>
  
<div class="my-5">  
  
<div class="row">

<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
  <ShoppingNav currentStep=2></ShoppingNav>

  <DataSection></DataSection>


</section>

<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
  <!-- <h3 class="text-center">status</h3> -->
   <ShoppingStatus></ShoppingStatus> 
</aside>


</div>

</div>

<Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import ShoppingNav from '../components/ShoppingNav'
import DataSection from '../components/dataSection'
import ShoppingStatus from '../components/ShoppingStatus'

export default {
components: {
        Header,
        Footer,
        ShoppingNav,
        ShoppingStatus,
        DataSection
    }
}
</script>

<style scoped>
#CompraStatus{
 padding: 0;
}

@media screen and (max-width:760px )  {
 #CompraStatus{
   margin-top: 2rem;
  
 }
}

</style>