Why is my Row with its child rows getting displayed above the Column in jetpack compose?

I am trying to display, group of rows below the content of the Column in my screen, the group of Rows basically serves a purpose of Progresss bar, but my group of Rows get displayed above the Column content like this

I want it to display below the Text content, what am I doind wrong here ? Below is my code.

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.Text
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.example.speechrecognition.Destinations
import kotlin.math.absoluteValue

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SpeechScreen1(navController: NavController) {
    var offsetX by remember { mutableStateOf(0f) }
    val swipeThreshold = 200 // Adjust this threshold as needed

    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(21.dp, top = 100.dp)
                .pointerInput(Unit) {
                    detectTransformGestures { _, offset, _, _ ->
                        offsetX += offset.x
                        if (offsetX.absoluteValue >= swipeThreshold) {
                            if (offsetX > 0) {
                                navController.navigate(Destinations.speechscreen2)
                            }
                            offsetX = 0f
                        }
                    }
                }
        ) {
            Text(
                text = "Please read the following text:",
                style = TextStyle(
                    fontSize = 20.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(400),
                    color = Color(0xFF000000)
                )
            )
            Text(
                text = "One morning Dorothy crossed the hall of the palace and knocked on the door of another girl named Trot. When told to enter, Dorothy found that Trot had company, an old sailor-man with a wooden leg who was sitting by the open window puffing smoke from a pipe.",
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.SansSerif,
                    fontWeight = FontWeight(300),
                    color = Color(0xFF080808)
                ),
                modifier = Modifier
                    .width(334.dp)
                    .wrapContentHeight()
                    .padding(top = 9.dp)
            )
        }
        Row(modifier = Modifier
            .padding(top = 27.dp)
            .padding(start = 21.dp, end = 6.dp)
            .fillMaxWidth()) {
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFF686868))
                    .padding(top = 26.dp)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {
            }
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {
            }
        }
    }
    }

>Solution :

You are using Box as the parent for both Column and Row and that’s why the content of Row is composed over the Column as the Box overlaps. So instead using Box you can use Column and then it will arrange the content vertically as first Column and then Row content.