Te propongo esto, ya que usas Bootstrap en su versión 4 usemos únicamente las clases de su sistema de cuadrícula (grid system).
Como bien sabemos, Bootstrap divide la pantalla del dispositivo hasta en 12 columnas. En tu layout estás usando dos columnas principales:
La columna del sidebar
(ocupando 2/12) y la columna en la que
tienes tu main
(ocupando 10/12).
Esto para dispositivos con un ancho superior a 992px
en su pantalla.

A partir de allí empezamos a jugar con los puntos de quiebre responsivos o Responsive Breakpoints, basándonos en su cuadrícula de columnas, usando las siguientes clases:
.col-lg-2 y .col-lg-10 (desde 1200px)
.col-md-3 y .col-md-9 (desde 768px)
.col-sm-12 y .col-sm-12 (desde 576px)
Anotación: La última clase la uso para que ocupe todo el ancho del dispositivo y por ende "arrastre" los elementos restantes creando una nueva fila. Aunque no es la opción más bonita, es totalmente válida.
Al meollo...
Una vez entendido esto, podemos decir que la primer columna, el sidebar
, puede incluir o anidar dentro de sí misma más columnas, es por ello que la dividí en dos dos columnas internas, a las cuales se les puede aplicar las mismas reglas de los puntos de quiebre.
Este sería el layout
simplificado (Ejecuta a pantalla completa y revisa los puntos de quiebre reduciendo la ventana).
.bordes{
height: 100px;
border: 1px solid;
}
main > .bordes{
height: 200px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/4/spacelab/bootstrap.min.css">
</head>
<!-- CONTENEDOR -->
<div class="container-fluid my-5">
<!-- ROW PRINCIPAL -->
<div class="row">
<!-- COLUMNA 1 EXTERNA -->
<div class="col-sm-12 col-md-3 col-lg-2">
<!-- row interno -->
<div class="row">
<!-- col1 interna -->
<div class=" col-6 col-sm-6 col-md-12">
<div class="bordes">CARD</div>
</div>
<!-- col2 interna -->
<div class="col-6 col-sm-6 col-md-12">
<div class="bordes">CARD</div>
</div>
</div>
</div>
<!-- COLUMNA 2 EXTERNA -->
<main role="main" class="col-sm-12 col-md-9 col-lg-10">
<div class="bordes">MAIN</div>
</main>
</div>
</div>
Así quedaría entonces tu código:
main {
background-color: #ebebeb;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<!-- Container Principal -->
<div class="container-fluid my-5">
<div class="row">
<!-- row principal -->
<!-- Columna 1 externa -->
<div class="col-sm-12 col-md-4 col-lg-2">
<div class="row">
<!-- row interno -->
<!-- col1 interna -->
<div class=" col-6 col-sm-6 col-md-12">
<div class="card my-4">
<div class="card-header"><i class="fas fa-user"></i>User</div>
<div class="card-body">
<h4 class="card-title">Links</h4>
<p class="card-text">Some quick example</p>
</div>
<!-- card body-->
</div>
<!-- card -->
</div>
<!-- col1 -->
<!-- col2 interna -->
<div class="col-6 col-sm-6 col-md-12">
<div class="card my-4">
<div class="card-header">Otros</div>
<div class="card-body">
<p class="card-text">text</p>
</div>
</div>
<!-- card -->
</div>
<!-- col2 -->
</div>
<!-- row interno -->
</div>
<!-- columna 2 externa -->
<main role="main" class="col-sm-12 col-md-8 col-lg-10">
Contenido Main
</main>
</div>
</div>
d-flex flex-row
a la clase que la contiene pero me distorsiona el diseño para pantalla grande.. cree un nuevodiv row
pero me igual me distorsiona.. poniendo clases flex a los card tampoco funciona..<main>
? Ya revisaste trabajar con los breakpoints de Bootstrap para cada una de las vistas?