@media (max-width: 767px) {
    .EquipmentDetailsForm thead {
        display: none;
    }

    .EquipmentDetailsForm tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        margin-bottom: 1rem;
    }

    .EquipmentDetailsForm td {
        display: block;
        text-align: right;
        border: none;
        border-bottom: 1px solid #dee2e6;
        position: relative;
        padding-left: 50%;
    }

    .EquipmentDetailsForm td:before {
        content: attr(data-label);
        position: absolute;
        left: .5rem;
        width: 45%;
        padding-right: .5rem;
        text-align: left;
        font-weight: bold;
    }

    .EquipmentDetailsForm td:last-child {
        border-bottom: none;
        text-align: center;
    }
}

/* Desktop / tablet: set responsive column proportions so Description is wider */
@media (min-width: 768px) {
    .EquipmentDetailsForm {
        width: 100%;
        table-layout: fixed; /* enforce the column widths below while remaining responsive */
    }

    .EquipmentDetailsForm th:nth-child(1),
    .EquipmentDetailsForm td:nth-child(1) {
        width: 20%; /* Category */
    }

    .EquipmentDetailsForm th:nth-child(2),
    .EquipmentDetailsForm td:nth-child(2) {
        width: 40%; /* Description — intentionally wider */
    }

    .EquipmentDetailsForm th:nth-child(3),
    .EquipmentDetailsForm td:nth-child(3) {
        width: 15%; /* Size/Length */
    }

    .EquipmentDetailsForm th:nth-child(4),
    .EquipmentDetailsForm td:nth-child(4) {
        width: 15%; /* Price */
    }

    .EquipmentDetailsForm th:nth-child(5),
    .EquipmentDetailsForm td:nth-child(5) {
        width: 10%; /* Actions (delete) */
    }
}